<div data-role="header" id="header" <?php if(!isset($search)) : ?>data-nobackbtn="true"<?php endif; ?>>
	<?php if(!isset($search)) : ?><a data-icon="arrow-l" rel="external" href="<?php echo WEB_ROOT?>webmail/menu">Retour</a><?php endif; ?>
	<h1><?php echo $title; ?></h1>
	<?php if(!isset($search)) : ?><a data-icon="refresh" id="reload" class="ui-btn-right actualiser" onClick="reloadmessages();"></a><?php endif; ?>
</div><!-- /header -->

<script type="text/javascript">
	var page = 1;
	var links = {};
	var inactivity = 0;
	
	function resetInactivity(){
		inactivity = 0;
	}
	
	$(document).ready(function(){
		
		$(window).bind('scrollstop', function(){
			resetInactivity();
		});
		
		<?php if(!isset($search)) : ?>
			window.setInterval(function(){
				inactivity += 1000;
				if(inactivity >= 60000){
					reloadmessages();
				}
			}, 1000);
		<?php endif; ?>
	});
	
	function nextmessages(){
		resetInactivity();
		$('#nextmessages').html("<div style='text-align:center; height:60px;'><img src='<?php echo WEB_ROOT; ?>assets/img/ajax-loader.gif' style='margin-top:16px;'/></div>");
		page++;
		$.ajax({
			type: "POST",
			url:'<?php echo WEB_ROOT; ?>webmail/next/',
			data: "page="+page+"&mailbox=<?php echo $mailbox ?>",
			success: function(data){
				$('#nextmessages').remove();
				$('#maillist').append(data);
				$('#maillist').listview('refresh');
			}
		});
	}
	
	function reloadmessages(){
		resetInactivity();
		var limails = $('.li-mail');
		$('.li-mail').remove();
		$('#maillist').html("<div style='text-align:center; height:60px;'><img src='<?php echo WEB_ROOT; ?>assets/img/ajax-loader.gif' style='margin-top:16px;'/></div>");
		$.ajax({
			type: "POST",
			url:'<?php echo WEB_ROOT; ?>webmail/reload/',
			data: "page="+page+"&mailbox=<?php echo $mailbox ?>",
			success: function(data){
				$('#nextmessages').remove();
				$('#maillist').html(data);
				$('#maillist').listview('refresh');
				$('#reload').attr('onClick', 'reloadmessages();');
			},
			error: function(){
				$('#maillist').html(limails);
				$('#reload').attr('onClick', 'reloadmessages();');
			}
		});
	}
	
	function toggleParametres(id) {
		resetInactivity();
		//Supprime les classes ajoutées sur les images par jQuery empêchant leur placement
		$('.slidebar-img').attr('class', 'slidebar-img');
		
		// Récupère l'id du <li> recevant le clic
		split = id.split('-');
		split = split[1];
		if(!$('#slidebar-'+split).hasClass('slidebar-open')){
			// Ferme le(s) autre(s) menu(s) ouvert(s)
			$('.slidebar-open').animate({width: '0px'}, 200, function(){
				$(this).css('display','none');
				$(this).removeClass('slidebar-open');
			});
			// Récupère le lien du <li> puis le désactive
			links[split] = $('#a-'+split).attr('href');
			$('#a-'+split).attr('href', '#');
			$('#slidebar-'+split).css('display','block');
			// Animation d'apparition du menu
			$('#slidebar-'+split).animate({width: '60%'}, 200, function(){
				$('#slidebar-'+split).addClass('slidebar-open');
			});
		} else if($('#slidebar-'+split).hasClass('slidebar-open')) {
			// Réactive le lien du <li>
			$('#a-'+split).attr('href', links[split]);
			// Ferme le menu
			$('#slidebar-'+split).removeClass('slidebar-open');
			$('#slidebar-'+split).animate({width: '0px'}, 200, function(){
				$('#slidebar-'+split).css('display','none');
			});
		}
	}
	
	function deleteSlidebarConfirm(uid) {
		resetInactivity();
		if(confirm('Voulez-vous vraiment supprimer ce message ?')) {
			$.ajax({
				type: "POST",
				url:'<?php echo WEB_ROOT; ?>webmail/movetotrash/',
				data: "mailbox=<?php echo $mailbox; ?>&uid="+uid,
				success: function(){
					$('#li-'+uid).animate({height: '0px'}, 200, function(){
						$('#li-'+uid).remove();
					});
				}
			});
		} else {
		}
	}
	
	function tagUnreadSlidebar(uid) {
		resetInactivity();
		$.ajax({
			type: "POST",
			url:'<?php echo WEB_ROOT; ?>webmail/tagunread/',
			data: "mailbox=<?php echo $mailbox; ?>&uid="+uid,
			success: function(){
				reloadmessages();
			}
		});
	}
	
	function tagReadSlidebar(uid) {
		resetInactivity();
		$.ajax({
			type: "POST",
			url:'<?php echo WEB_ROOT; ?>webmail/tagread/',
			data: "mailbox=<?php echo $mailbox; ?>&uid="+uid,
			success: function(){
				reloadmessages();
			}
		});
	}
</script>

<div data-role="content" id="content">
	
	<form method="post" action="<?php echo WEB_ROOT ?>webmail/search/<?php echo $mailbox; ?>" class="searchInput">
		<input type="hidden" name="mailbox" value="<?php echo $mailbox; ?>" />
		<input type="search" name="search" id="search" class="searchfield" value="<?php if(isset($query)){echo $query;} ?>" placeholder="Rechercher..." />
	</form><!-- /search form -->
	<br />
	
	<ul class="list" id="maillist" data-role="listview" data-split-icon="gear" data-theme="c" data-split-theme="d">
		<?php if(count($emails) == 0): ?>
		<li>Aucun message</li>
		<?php else : include("_listmails.php");
		endif; ?>
	</ul>
</div><!-- /content -->

<div data-role="footer" id="footer">
	<div style="float: left; margin-left: 20%">
		<a href="<?php echo WEB_ROOT; ?>compose/index" rel="external">
			<div style="width: 32px; height: 32px; line-height: 32px; text-align: center;">
				<img src="<?php echo WEB_ROOT; ?>assets/img/pencil-icon_big.png" alt="Ecrire" style="vertical-align: middle;" />
			</div>
		</a>
	</div>
	<div style="float: right; margin-right: 20%">
		<a id="deco" onClick="if(confirm('Voulez-vous vraiment vous déconnecter ?')){this.setAttribute('href', '<?php echo WEB_ROOT; ?>member/logout');}" rel="external">
			<div style="width: 32px; height: 32px; line-height: 32px; text-align: center;">
				<img src="<?php echo WEB_ROOT; ?>assets/img/logout.png" style="vertical-align: middle;" alt="Logout" />
			</div>
		</a>
	</div>
</div><!-- /footer -->

<style>
	.list .ui-li .ui-btn-inner { padding:0;}
</style>
